<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画</title>
    <link rel="stylesheet" href="./css/animate.css" />
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    @keyframes rotate-in {
      from {
        opacity: 0;
        transform: rotate3d(0, 0, 1, -200deg);
      }
      to {
        opacity: 1;
      }
    }
    @keyframes rotate-out {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
        transform: rotate3d(0, 0, 1, 200deg);
      }
    }
    /* @keyframes heartbeat {
      from {
        transform: scale(1);
      }
      15% {
        transform: scale(1.3);
      }
      30% {
        transform: scale(1);
      }
      45% {
        transform: scale(1.3);
      }
      70% {
        transform: scale(1);
      }
    } */
    .box {
      width: 100px;
      height: 100px;
      margin: 200px auto;
      background: pink;
      animation-name: swing;
      animation-duration: 1s;
      /* animation-delay: 2s; */
      /* 保持最后的状态 */
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      /* animation: forwards; */
      /* animation: name duration timing-function delay iteration-count direction fill-mode; */
      /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    }
  </style>
  <body>
    <!-- <button onclick="toggle(event)">toggle</button> -->
    <div class="box"></div>
  </body>
  <script>
    let flag = true;
    function toggle(event) {
      let dom = document.querySelector(".box");
      flag = !flag;
      if (flag) {
        dom.classList.remove("fadeOut");
        dom.classList.add("fadeIn");
      } else {
        dom.classList.remove("fadeIn");
        dom.classList.add("fadeOut");
      }
    }
  </script>
</html>
